<template>
  <div class="container">
    <div class="nav-bar flex">
        <div class="active">精选推荐</div>
        <div>汽车用品</div>
        <div>女士用品</div>
        <div>生活用品</div>
        <div>饮料食品</div>
    </div>
    <div class="nav-bar-before"></div>   
    <div class="goods-item-list">
        <template v-for="(item,index) in list">
            <div class="goods-item" :key="index">
                <img src="../../assets/imgs/goods4@2x.png" alt="" class="goods-img">
                <div class="goods-info flex">
                    <div class="flex-con">
                        <div class="goods-title">
                        零度行车记录仪
                    </div>
                    <div class="goods-points flex">
                        <span class="points">750积分</span><span class="money">+288元</span>                    
                    </div>
                    </div>
                    <div class="buybtn">
                        立即抢购
                    </div>
                </div>
            </div>
            <div class="hr10gray" :key="index"></div>
        </template>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [{}, {}, {}]
    };
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/nav";
.goods-item-list {
  padding-top: 0.5333rem;
}
.goods-img {
  height: 3.32rem;
  line-height: 3.32rem;
}
.goods-info {
  padding: 0.36rem 0.4rem;
  .goods-title {
    font-size: 0.3467rem;
    color: #17402a;
    padding-bottom: 0.32rem;
  }
  .points {
    font-size: 0.3733rem;
    color: #ff2a2a;
  }
  .money {
    font-size: 0.3733rem;
    color: #005a1a;
  }
  .buybtn{
      width: 2.0267rem;
    height: 0.6667rem;
    line-height: 0.6667rem;
    	font-size: 0.3467rem;
	color: #ffffff;
    text-align: center;
	background-color: #ff1515;
	border-radius: 0.1333rem;
  }
}
.hr10gray:last-child{
    display: none;
}
</style>

